<template>
  <div class="miubibi">
    <!-- 多选框 -->
    <el-card class="botton-card">
      <el-row class="miubibi">
        <strong>聘用形式：</strong>
        <!-- `checked` 为 true 或 false -->
        <el-checkbox-group v-model="officialcheckList">
          <el-checkbox v-for="item in official" :key="item.id" :label="item.value" @change="changecheckbox">{{ item.value }}</el-checkbox>
        </el-checkbox-group>
      </el-row>
      <el-row>
        <strong>员工状态：</strong>
        <el-checkbox-group v-model="trainingcheckList">
          <el-checkbox v-for="item in training" :key="item.id" :label="item.id" @change="changecheckbox">{{ item.value }}</el-checkbox>
        </el-checkbox-group>
      </el-row>

      <div style="margin-top:15px">
        <template>
          <strong>部门：</strong>
          <el-checkbox-group v-model="sectionlistcheckList">
            <el-checkbox v-for="item in sectionlist" :key="item.id" :label="item.name" @change="changecheckbox">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getDepartments } from '@/api/departments' // 获取部门
import EmployeeData from '@/api/constant/employees'
export default {
  data() {
    return {
      official: EmployeeData.hireType, // 正式或非正式
      training: EmployeeData.workingState, // 是否离职
      sectionlist: [], // 部门列表
      officialcheckList: [],
      trainingcheckList: [],
      sectionlistcheckList: []
    }
  },
  created() {
    this.getDepartments() // 部门列表
  },
  methods: {
    // 部门列表
    async getDepartments() {
      const { depts } = await getDepartments()
      this.sectionlist = depts
    },
    // 部门
    changecheckbox() {
      const selectParams = {
        'officialcheckList': this.officialcheckList,
        'trainingcheckList': this.trainingcheckList,
        'sectionlistcheckList': this.sectionlistcheckList
      }
      this.$parent.changeSelectParams && this.$parent.changeSelectParams(selectParams)
    }
  }
}
</script>

<style>
.miubibi{
  margin-bottom: 15px;
}
</style>
